<template>
  <view class="tokenContent">
    <scroll-view
      style="height: 100vh"
      scroll-y="true"
      refresher-enabled="true"
      :refresher-triggered="triggered"
      refresher-background="#f6f6f6"
      :refresher-threshold="50"
      @scrolltolower="onScrollToLower"
      @refresherrefresh="onRefresh">
      <view class="topCard">
        <text
          :class="routerType == 'exchange' ? 'txt' : 'txt1'"
          @click.stop="getExchanged"
          >兑换券使用记录</text
        >
        <text
          :class="routerType == 'money' ? 'txt' : 'txt1'"
          @click.stop="getMoneyList"
          >{{$tokenName}}提现记录</text
        >
      </view>
      <!-- <NoneData v-if="TokenList.length == 0"></NoneData> -->
      <view class="tokenList">
        <view
          class="content"
          v-if="routerType == 'exchange'">
          <view
            class="item"
            v-for="(item, index) in TokenList"
            :key="index">
            <view
              class="flex"
              style="justify-content: space-between">
              <view class="flex title">
                <image
                  src="/static/shop.png"
                  mode=""></image>
                <text>{{ item.storeName }}</text>
              </view>
              <view class="status"> 兑换成功 </view>
            </view>
            <view class="main flex">
              <image
                :src="item.imgUrl"
                mode=""></image>
              <view>
                <view>{{ item.commodityName }}</view>
                <view>数量：1</view>
                <view>消费{{ $tokenName }}：{{ item.consumeNum }}</view>
                <view>下单时间：{{ item.consumerTime | useTime }}</view>
              </view>
            </view>
          </view>
        </view>
        <view
          class="money"
          v-if="routerType == 'money'">
          <view
            class="money-item"
            v-for="item in TokenList"
            :key="item.id">
            <image
              src="/static/my/recard-draw.png"
              mode=""></image>
            <view class="info">
              <view> 提现{{ $tokenName }}：{{ item.exchangeToken }} </view>
              <view> {{ $tokenName }}价格：{{ item.tokenPrice }} </view>
              <view> 提现方式：{{ item.method | withMethod }} </view>
              <view> 订单状态：{{ item.transStat | withTransStat }} </view>
              <view> 提现时间：{{ item.createTime | formatDate }} </view>
            </view>
            <view class="price"> +{{ item.exchangeMoney }}¥ </view>
          </view>
        </view>
        <view
          v-if="haMore"
          style="text-align: center; color: #999; padding: 10rpx 0">
          正在加载...
        </view>
        <view
          v-if="!haMore && TokenList.length != 0"
          style="text-align: center; color: #999; padding: 10rpx 0">
          没有更多了
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script>
  import dayjs from 'dayjs'
  import { getExchanged, reqWithdrawalRecords } from '@/apis/first'
  import { getUsedTokenList } from '@/apis/my'
  import { parseTime } from '@/utils/index'
  export default {
    data() {
      return {
        routerType: 'exchange',
        TokenList: [],
        memberId: '',
        page: {
          pageNum: 1,
          pageSize: 10
        },
        triggered: false,
        nextPage: 1,
        isEmpty: false,
        haMore: false
      }
    },

    filters: {
      useTime(time) {
        return parseTime(time)
      },
      formatDate(time) {
        return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
      },
      withMethod(type) {
        switch (type) {
          case 'WECHAT':
            return '微信'
          case 'ALIPAY':
            return '支付宝'
          case 'UQRCODEPAY':
            return '银联'
          case 'BESTPAY':
            return '翼支付'
          case 'SUNING':
            return '苏宁易付宝'
          case 'DCPAY':
            return '数字货币'
          default:
            return ''
        }
      },
      withTransStat(type) {
        if (type == 'S') {
          return '成功'
        } else if (type == 'F') {
          return '失败'
        } else {
          return '处理中'
        }
      }
    },
    onLoad(option) {
      this.routerType = option.type
      this.memberId = option.memberId
    },
    onShow() {
      this.getExchanged()
    },
    methods: {
      async getExchanged() {
        this.TokenList = []
        this.routerType = 'exchange'
        this.page.pageSize = 10
        this.page.pageNum = 1
        this.getTokenList(1, 10)
      },
      async getMoneyList() {
        this.TokenList = []
        this.routerType = 'money'
        this.page.pageSize = 10
        this.page.pageNum = 1
        this.getTokenList(1, 10)
      },

      async onRefresh() {
        this.triggered = true
        // 必须要在请求结束后才结束下拉的动画
        await this.getTokenList()
        this.triggered = false
      },
      // 监听用户是否滚动到页面底部
      onScrollToLower() {
        console.log('到底了...')
        // 如果没有更多数据，则不必发起请求
        console.log(this.haMore)
        if (!this.haMore) return uni.utils.toast('没有更多数据了')
        this.getTokenList(this.nextPage)
      },
      async getTokenList(pageNum = 1, pageSize = 10) {
        let { memberId } = this
        if (this.routerType === 'exchange') {
          const res = await getExchanged({
            memberId: memberId,
            pageNum: pageNum,
            pageSize: pageSize
          })
          if (res.code === 200) {
            const data = res.data
            // 如果是第一页，则清空数据
            if (pageNum === 1) {
              this.TokenList = []
            }
            // 添加数据
            this.TokenList = [...this.TokenList, ...data.list]
            // 判断是否为空数组
            this.isEmpty = this.TokenList.length === 0
            // 计算下一页页码
            this.nextPage = ++data.pageNum
            // 判断是否还有下一页数据
            this.haMore = this.nextPage <= data.pages
            console.log(this.TokenList, '兑换记录')
          } else {
            uni.utils.toast('获取列表失败')
          }
        } else if (this.routerType === 'money') {
          const res = await reqWithdrawalRecords({
            pageNum: pageNum,
            pageSize: pageSize,
            memberId: memberId
          })
          if (res.code === 200) {
            const data = res.data
            // 如果是第一页，则清空数据
            if (pageNum === 1) {
              this.TokenList = []
            }
            // 添加数据
            this.TokenList = [...this.TokenList, ...data.list]
            // 判断是否为空数组
            this.isEmpty = this.TokenList.length === 0
            // 计算下一页页码
            this.nextPage = ++data.pageNum
            // 判断是否还有下一页数据
            this.haMore = this.nextPage <= data.pages
            console.log(this.TokenList, '提现记录')
          } else {
            // console.log(res)
            uni.utils.toast('获取列表失败')
          }
        }
      },
      showCode(id) {
        console.log(id)
        uni.navigateTo({
          url: '/packageB/pages/redeemCode/redeemCode?' + 'id=' + id
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .tokenContent {
    height: 100vh;
    background-color: #f6f6f6;

    .topCard {
      height: 108rpx;
      display: flex;
      justify-content: space-between;
      padding-top: 40rpx;
      padding-right: 100rpx;
      padding-left: 100rpx;
      border-bottom: 2rpx solid #d9d9d9;
      .txt {
        height: 68rpx;
        font-size: 32rpx;
        font-weight: bold;
        color: #1a1a1a;
        line-height: 44rpx;
        padding: 0 10rpx;
        padding-bottom: 10px;
        border-bottom: 6rpx solid #2f64ff;
      }
      .txt1 {
        height: 44rpx;
        font-size: 32rpx;
        font-weight: 400;
        color: #999999;
        padding: 0 10rpx;
        padding-bottom: 20rpx;
        line-height: 44rpx;
      }
    }

    .tokenList {
      .content {
        .flex {
          display: flex;
          align-items: center;
        }
        .item {
          padding: 10px;
          background: #fff;
          margin: 10px;
          border-radius: 8px;
          font-size: 12px;
          font-family: PingFang SC, PingFang SC;
          font-weight: 500;
          color: #999999;
          .status {
            font-size: 12px;
            font-family: PingFang SC, PingFang SC;
            font-weight: 500;
            color: #999999;
          }
          .main {
            margin-top: 10px;
            height: 100px;

            image {
              width: 100px;
              height: 100%;
              margin-right: 10px;
            }

            > view {
              height: 100px;
              display: flex;
              flex-direction: column;
              justify-content: space-around;
            }
          }
        }

        .title {
          image {
            width: 26px;
            height: 26px;
            margin-right: 10px;
          }

          text {
            font-size: 14px;
            font-family: PingFang SC, PingFang SC;
            font-weight: bold;
            color: #333;
          }
        }
      }

      .money-item {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: #fff;
        margin: 10px;
        padding: 10px;
        border-radius: 8px;

        image {
          width: 70px;
          height: 70px;
          margin-right: 10px;
        }

        .info {
          display: flex;
          flex-direction: column;
          justify-content: space-between;

          font-size: 28rpx;
          font-family: PingFang SC, PingFang SC;
          color: #999;
          view {
            padding: 5rpx 0;
          }
        }

        .price {
          position: absolute;
          right: 10px;
          top: 50%;
          transform: translateY(-50%);
          font-size: 32rpx;
          font-family: PingFang SC, PingFang SC;
          font-weight: 800;
          color: #1a1a1a;
        }
      }
    }
  }
</style>
